{% load static %}
<!DOCTYPE html>
  <html>
    <head>
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      <link rel="stylesheet" href="{% static "/custom.css" %}">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="{% static "/async.js" %}"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>

		<!-- TOP NAV -->
		<div class="navbar-fixed">
			<nav style="background-color:rgba(0,0,0,0.8);">
				<div class="nav-wrapper">
					<div class="left scantitle" id="scantitle"></div>
					<a href="/" class="brand-logo center"><img src="/static/logo.png" style="height:28px;" /></a>
					<ul class="right hide-on-med-and-down">
						<li><a href="/setscanfile/unset">Scan List</a></li>
						<li><a href="/">Scan Detail</a></li>
					</ul>
				</div>
			</nav>
		</div>
 

		<div class="container" style="margin-top:60px;">

			<!-- HEADER -->
			{{ topcontainer|safe }}
			<div class="card" style="background-color:#3e3e3e;">
				<div class="card-content">
					{{ scaninfo|safe }}
				</div>
				<div class="card-reveal" style="background-color:#3e3e3e;">
					<span class="card-title grey-text">Scan Details<i class="material-icons right">close</i></span>
					{{ scandetails|safe }}
				</div>
			</div>

			<!-- PRE RESULTS TABLE -->
			<div class="pretable"> {{ pretable|safe }} </div>

			<!-- RESULTS TABLE -->
			<div class="card" style="background-color:#3e3e3e;">
				<div class="card-content">
					<table class="">
						<thead>
							{{ trhead|safe }}
						</thead>
						<tbody>
							{{ trhost|safe }}
						</tbody>
					</table>
				</div>
			</div>

			{{ table|safe }}

			<!-- DEBUG -->
			<pre>
				{{ out|safe }}
			</pre>
		</div>

		<!-- MODAL -->
		<div id="modal1" class="modal modal-fixed-footer">
			<div class="modal-content">
				<h4 id="modaltitle">un titolo</h4>
				<p id="modalbody">del testo</p>
			</div>
			<div class="modal-footer" id="modalfooter" style="background-color:#3e3e3e;">
				<a href="#!" class="modal-close waves-effect waves-green btn grey white-text">OK</a>
			</div>
			{% csrf_token %}
		</div>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
		<script>
			$(document).ready(function(){
				$('.sidenav').sidenav();
				$('.modal').modal();
			});

			document.addEventListener('DOMContentLoaded', function() {
				var elems = document.querySelectorAll('.fixed-action-btn');
				var instances = M.FloatingActionButton.init(elems, {
					direction: 'top'
				});
			});
		</script>

	</body>
</html>
